import { insertCssLink } from "../../util/insert-style.js"
import config from "../../util/config.js"
function createContent(content_) {
    const contentDiv = $('<div></div>'); // 使用 jQuery 创建 div
    contentDiv.css({
        backgroundColor: '#f8fff8', // 设置背景颜色为更浅的灰色
        display: 'flex', // 使用 flexbox
        flexDirection: 'column', // 垂直排列
        justifyContent: 'center', // 垂直居中
        alignItems: 'center', // 水平居中
        marginTop:'60px',
        padding:'10px'
    });

    // 设置内容的高度
    if (!content_) {
        contentDiv.css('height', `${$(window).height() - 61}px`); // 100px 为示例的其他元素高度
       
        // 创建加载中提示的小圆圈
        const loader = $('<div class="loader"></div>'); // 使用 jQuery 创建 loader
        contentDiv.append(loader);

        // 添加加载中字样
        const loadingText = $('<p>加载中...</p>'); // 使用 jQuery 创建 p
        loadingText.css({
            textAlign: 'center', // 文本居中
            color: '#28a745' // 改变加载文字的颜色为绿色
        });
        contentDiv.append(loadingText);
    } else {
        // 插入参数内容并居中显示
        // let content;

        content_().then(res => {

            contentDiv.append(res);

        })


        contentDiv.css('height', 'auto');
        
    }

    // 设置内容的宽度
    const storedWidth = localStorage.getItem('contentWidth');
    contentDiv.css('width', storedWidth ? `${storedWidth}px` : config.pageWidth);

    insertCssLink("content");
    return contentDiv[0]; // 返回原生 DOM 元素
}


export {
    createContent
}
